
<template>
  <div>
    <van-nav-bar title="人脸识别登录" left-text="返回" left-arrow @click-left="onClickLeft" />
    <video ref="videoRef" width="400" height="300" autoplay></video>
    <button @click="capture">拍照并登录</button>
  </div>
</template>  
  
  
      <script setup>
import { ref, onMounted, reactive } from 'vue'

import axios from 'axios'
import router from '@/router';


// export default {
// setup() {
const videoRef = ref(null)

const message = ref('')

const videoStream = ref(null)
const onClickLeft = () => history.back()
onMounted(async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      
      
    })

    videoStream.value = stream
   
    videoRef.value.srcObject = stream
    
  } catch (error) {
    console.error('Error accessing media devices.', error)
  }
})

const capture = async () => {
  if (!videoRef.value) return

  const canvas = document.createElement('canvas')

  const context = canvas.getContext('2d')

  canvas.width = videoRef.value.videoWidth

  canvas.height = videoRef.value.videoHeight

  context.drawImage(videoRef.value, 0, 0)
  const imageDataUrl = canvas.toDataURL('image/png')
  const base64Image = imageDataUrl.split(',')[1]
  try {
    const response = await axios.post(
      'http://127.0.0.1:3000/cj/face-verification',

      {
        faceData: base64Image
       
      }
      
    )
   
    message.value = response.data.message
    console.log(response.data.message);
    router.push('/home')
    
  } catch (error) {
    message.value = '登录失败，请重试.'
  }
}
</script>  
  
  
      <style scoped>
</style>